<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h3>公司数据</h3>
    </div>
    <div class="text item">
      <el-form label-width="130px">
        <h3>公司认证数</h3>
        <el-form-item v-for="(company, i) in companyList.countGroupByCertificationType" :key="i"
        >
          <template #label>
            <span>{{ company.certificationType }}</span>
            <el-button size="small" type="danger" @click="companyList.countGroupByCertificationType.splice(i,1)">-</el-button>
          </template>
          <el-input v-model="company.count" clearable @clear="companyList.countGroupByCertificationType.splice(i, 1)" />

        </el-form-item>
      </el-form>
      <el-form :inline="true" label-width="130px">
        <el-form-item label="认证类型">
          <el-select v-model="companyTypes.certificationType">
            <el-option label="知识产权贯标" value="知识产权贯标"></el-option>
            <el-option label="质量体系认证" value="质量体系认证"></el-option>
            <el-option label="CNSA认证" value="CNSA认证"></el-option>
            <el-option label="未认证" value="未认证"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="companyTypes.count" />

        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitCompanyTypes">确定</el-button>
        </el-form-item>
      </el-form>


      <el-form label-width="130px">
        <h3>公司类型数</h3>
        <el-form-item v-for="(type, i) in companyList.countGroupByType" :key="i" >
          <template #label>
            <span>{{type.type}}</span>
            <el-button size="small" type="danger" @click="companyList.countGroupByType.splice(i,1)">-</el-button>
          </template>
          <el-input v-model="type.count" clearable @clear=" companyList.countGroupByType.splice(i, 1)" />
        </el-form-item>
      </el-form>

      <el-form :inline="true" label-width="130px">

        <el-form-item label="公司类型">
          <el-select v-model="countGroupByType.type">
            <el-option label="高新技术企业" value="高新技术企业"></el-option>
            <el-option label="科技型中小企业" value="科技型中小企业"></el-option>
            <el-option label="中小微企业" value="中小微企业"></el-option>
            <el-option label="大规模企业" value="大规模企业"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="countGroupByType.count" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="sumbitCountGroupByType">确定</el-button>
        </el-form-item>
      </el-form>

      <el-form label-width="130px">
        <h3>公司总数</h3>
        <el-form-item label="数量">
          <el-input v-model="companyList.totalCount" />
        </el-form-item>
      </el-form>

      <el-form label-width="130px" style="margin-bottom: 20px">
        <h3>入驻公司数/年</h3>
        <el-form-item v-for="(item, i) in companyList.countGroupByYear" :key="i" >
          <template #label>
            <span>{{item.year}}</span>
            <el-button size="small" type="danger" @click="companyList.countGroupByYear.splice(i,1)">-</el-button>
          </template>
          <el-input v-model="item.count" clearable @clear="companyList.countGroupByYear.splice(i, 1)" />

        </el-form-item>

      </el-form>


      <el-form :inline="true" label-width="130px">
        <el-form-item label="日期">
          <el-date-picker
              v-model="countGroupByYear.year"
              placeholder="选择年"
              style="width: 100%"
              type="year"
              value-format="yyyy"
          >
          </el-date-picker>

        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="countGroupByYear.count" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitCountGroupByYear">确定</el-button>
        </el-form-item>
      </el-form>

      <el-form label-width="130px" style="margin-bottom: 20px">
        <h3>入驻公司数/月</h3>
        <el-form-item v-for="(item, i) in companyList.countGroupByMonth" :key="i" :label="item.month + ''">
          <template #label>
            <span>{{item.month}}</span>
            <el-button size="small" type="danger" @click="companyList.countGroupByMonth.splice(i,1)">-</el-button>
          </template>
          <el-input v-model="item.count" clearable @clear="companyList.countGroupByMonth.splice(i, 1)" />

        </el-form-item>
      </el-form>

      <el-form :inline="true" label-width="130px">

        <el-form-item label="日期">
          <el-date-picker
              v-model="countGroupByMonth.month"
              placeholder="选择月"
              style="width: 100%"
              type="month"
              value-format="yyyy-MM"
          >
          </el-date-picker>

        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="countGroupByMonth.count" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitCountGroupByMonth">确定</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div style="text-align: right">
      <el-button type="danger" @click="OverWrite">恢复真实数据</el-button>
      <el-button type="danger" @click="setCompanyJson">确定修改</el-button>
    </div>
  </el-card>
</template>

<script>
import {getJson, overWrite, setJson,} from "../../network/versionApi";
import {copyObj} from "../../common/utils";

export default {
  name: "companyVersion",
  data() {
    return {
      param: {
        type: "Company",
        name: "statistics",
        version: 0,
      },
      companyList: {},
      companyTypes: {
        certificationType: "",
        count: null,
      },
      countGroupByType: {
        count: null,
        type: ""
      },
      countGroupByMonth: {
        count: null,
        month: null
      },
      countGroupByYear: {
        year: null,
        count: null
      }
    }
  },
  methods: {

    submitCountGroupByYear() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.companyList.countGroupByYear.unshift(copyObj(this.countGroupByYear))
        this.countGroupByYear = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    //每月公司入驻添加
    submitCountGroupByMonth() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.companyList.countGroupByMonth.unshift(copyObj(this.countGroupByMonth))
        this.countGroupByMonth = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },

    //公司类型添加
    sumbitCountGroupByType() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.companyList.countGroupByType.push(copyObj(this.countGroupByType))
        this.countGroupByType = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    //认证类型添加
    submitCompanyTypes() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.companyList.countGroupByCertificationType.push(copyObj(this.companyTypes))
        this.companyTypes = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    getcompanyJson() {
      this.param.version = this.version;
      getJson(this.param).then(res => {
        this.companyList = res.data

      }).catch(() => {
        // this.getcompanyJson()
      })
    },
    setCompanyJson() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setJson(this.param, this.companyList).then(() => {
          this.getcompanyJson();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },
    OverWrite() {
      this.$confirm('确定恢复真实数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        overWrite(this.param).then(res => {
          console.log(res)
          this.getcompanyJson();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },
  },
  mounted() {
    if (!this.watch) {
      this.getcompanyJson();
    }
  },
  watch: {
    "version": {
      handler: function () {
        this.getcompanyJson();
      }
    }
  },
  props: ["version"],
}
</script>

<style scoped>

</style>